<template>
	<view>
		<view v-if="value === 0">
			<HomePage />
		</view>
		<view v-else-if="value === 1">
			<CommunityPage />
		</view>
		<view v-else-if="value === 2">
			<ChatPage />
		</view>
		<view v-else-if="value === 3">
			<MyPage />
		</view>
		<!-- Tabbar -->
		<up-tabbar :value="value" @change="handleChange" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
			<up-tabbar-item text="首页">
				<template #active-icon>
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="rgba(92,162,254,1)">
						<path
							d="M20 20C20 20.5523 19.5523 21 19 21H5C4.44772 21 4 20.5523 4 20V11L1 11L11.3273 1.6115C11.7087 1.26475 12.2913 1.26475 12.6727 1.6115L23 11L20 11V20ZM9 9.99998V16H15V9.99998H9ZM11 12H13V14H11V12Z"
						></path>
					</svg>
				</template>
				<template #inactive-icon>
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="rgba(96,98,102,1)">
						<path
							d="M19 21H5C4.44772 21 4 20.5523 4 20V11L1 11L11.3273 1.6115C11.7087 1.26475 12.2913 1.26475 12.6727 1.6115L23 11L20 11V20C20 20.5523 19.5523 21 19 21ZM6 19H18V9.15745L12 3.7029L6 9.15745V19ZM9 9.99998H15V16H9V9.99998ZM11 12V14H13V12H11Z"
						></path>
					</svg>
				</template>
			</up-tabbar-item>
			<up-tabbar-item text="社区">
				<template #active-icon>
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="rgba(92,162,254,1)">
						<path
							d="M4 3C3.44772 3 3 3.44772 3 4V20C3 20.5523 3.44772 21 4 21H20C20.5523 21 21 20.5523 21 20V4C21 3.44772 20.5523 3 20 3H4ZM7 9V7H17V9H7ZM7 13V11H17V13H7ZM17 17H7V15H17V17Z"
						></path>
					</svg>
				</template>
				<template #inactive-icon>
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="rgba(96,98,102,1)">
						<path
							d="M5 19H19V5H5V19ZM3 4C3 3.44772 3.44772 3 4 3H20C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4ZM7 9H17V7H7V9ZM17 13H7V11H17V13ZM7 17H17V15H7V17Z"
						></path>
					</svg>
				</template>
			</up-tabbar-item>
			<up-tabbar-item text="聊天">
				<template #active-icon>
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="rgba(92,162,254,1)">
						<path
							d="M6.45455 19L2 22.5V4C2 3.44772 2.44772 3 3 3H21C21.5523 3 22 3.44772 22 4V18C22 18.5523 21.5523 19 21 19H6.45455ZM7 10V12H9V10H7ZM11 10V12H13V10H11ZM15 10V12H17V10H15Z"
						></path>
					</svg>
				</template>
				<template #inactive-icon>
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="rgba(96,98,102,1)">
						<path
							d="M6.45455 19L2 22.5V4C2 3.44772 2.44772 3 3 3H21C21.5523 3 22 3.44772 22 4V18C22 18.5523 21.5523 19 21 19H6.45455ZM5.76282 17H20V5H4V18.3851L5.76282 17ZM11 10H13V12H11V10ZM7 10H9V12H7V10ZM15 10H17V12H15V10Z"
						></path>
					</svg>
				</template>
			</up-tabbar-item>
			<up-tabbar-item text="我的">
				<template #active-icon>
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="rgba(92,162,254,1)">
						<path
							d="M3 4.99509C3 3.89323 3.89262 3 4.99509 3H19.0049C20.1068 3 21 3.89262 21 4.99509V19.0049C21 20.1068 20.1074 21 19.0049 21H4.99509C3.89323 21 3 20.1074 3 19.0049V4.99509ZM6.35687 18H17.8475C16.5825 16.1865 14.4809 15 12.1022 15C9.72344 15 7.62182 16.1865 6.35687 18ZM12 13C13.933 13 15.5 11.433 15.5 9.5C15.5 7.567 13.933 6 12 6C10.067 6 8.5 7.567 8.5 9.5C8.5 11.433 10.067 13 12 13Z"
						></path>
					</svg>
				</template>
				<template #inactive-icon>
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="rgba(96,98,102,1)">
						<path
							d="M3 4.99509C3 3.89323 3.89262 3 4.99509 3H19.0049C20.1068 3 21 3.89262 21 4.99509V19.0049C21 20.1068 20.1074 21 19.0049 21H4.99509C3.89323 21 3 20.1074 3 19.0049V4.99509ZM5 5V19H19V5H5ZM7.97216 18.1808C7.35347 17.9129 6.76719 17.5843 6.22083 17.2024C7.46773 15.2753 9.63602 14 12.1022 14C14.5015 14 16.6189 15.2071 17.8801 17.0472C17.3438 17.4436 16.7664 17.7877 16.1555 18.0718C15.2472 16.8166 13.77 16 12.1022 16C10.3865 16 8.87271 16.8641 7.97216 18.1808ZM12 13C10.067 13 8.5 11.433 8.5 9.5C8.5 7.567 10.067 6 12 6C13.933 6 15.5 7.567 15.5 9.5C15.5 11.433 13.933 13 12 13ZM12 11C12.8284 11 13.5 10.3284 13.5 9.5C13.5 8.67157 12.8284 8 12 8C11.1716 8 10.5 8.67157 10.5 9.5C10.5 10.3284 11.1716 11 12 11Z"
						></path>
					</svg>
				</template>
			</up-tabbar-item>
		</up-tabbar>
	</view>
</template>

<script>
import HomePage from '@/pages/main/main.vue';
import CommunityPage from '@/pages/community/community.vue';
import ChatPage from '@/pages/positions/positions.vue';
import MyPage from '@/pages/personal/personalView.vue';

export default {
	data() {
		return {
			value: 0 // 当前页面索引
		};
	},
	methods: {
		// 处理 Tab 切换
		handleChange(name) {
			console.log(name);
			this.value = name; // 更新选中的 Tab
		}
	},
	components: {
		HomePage,
		CommunityPage,
		ChatPage,
		MyPage
	}
};
</script>

<style></style>
